const { transform } = require('@babel/core');
const { marked, logger } = require('../../../utils');

function getGlobalControl() {
    const liveDemo = `
    <span id="live-demo" role="img" aria-label="edit" className="code-box-expand-trigger">
        <Balloon.Tooltip
            align="b"
            style={{ maxWidth: 320, marginTop: 24 }}
            trigger={
                <svg id="live-on" viewBox="0 0 16 16" focusable="false" className="" data-icon="edit"
                    width="1em" height="1em" fill="currentColor" aria-hidden="true"
                    style={{ boxSizing: 'border-box', border: '1.8 solid rgba(0, 0, 0, .45)', width: 20, height: 20, padding: 2 }}>
                    <path d="M9.69559557,3.62666667 L2.20866223,11.1146667 L1.8673289,12.3562667 L3.1153289,12.0181333 L10.6011956,4.53226667 L9.69559557,3.62666667 Z M10.4497289,2.87253333 L11.3553289,3.77813333 L12.2673289,2.86613333 C12.4290988,2.70436348 12.4922771,2.46857876 12.4330652,2.24759702 C12.3738533,2.02661528 12.201247,1.85400889 11.9802652,1.79479701 C11.7592835,1.73558513 11.5234988,1.79876346 11.3617289,1.96053333 L10.4497289,2.87253333 L10.4497289,2.87253333 Z M13.0203956,1.20639113 C13.3405419,1.52647328 13.5204044,1.96062968 13.5204044,2.41333333 C13.5204044,2.86603699 13.3405419,3.30019339 13.0203956,3.62026667 L3.6689289,12.9728 L0.346262232,13.8741333 L1.25506223,10.5589333 L10.6075956,1.20639113 C10.9276688,0.886253633 11.3618252,0.706391131 11.8145289,0.706391131 C12.2672326,0.706391131 12.701389,0.886253633 13.0214622,1.20639113 L13.0203956,1.20639113 Z M1,15 L11,15 L11,16 L1,16 L1,15 Z"></path>
                </svg>}
        >
            <span>使用在线编辑模式</span>
        </Balloon.Tooltip>
        <Balloon.Tooltip
            align="b"
            style={{ maxWidth: 320, marginTop: 24 }}
            trigger={
                <svg id="live-off" viewBox="0 0 16 16" focusable="false" className="" data-icon="edit"
                    width="1em" height="1em" aria-hidden="true"
                    style={{ boxSizing: 'border-box', border: '1.8 solid rgba(0, 0, 0, .45)', width: 20, height: 20, padding: 2, display: 'none' }}>
                     <path d="M9.69559557,3.62666667 L2.20866223,11.1146667 L1.8673289,12.3562667 L3.1153289,12.0181333 L10.6011956,4.53226667 L9.69559557,3.62666667 Z M10.4497289,2.87253333 L11.3553289,3.77813333 L12.2673289,2.86613333 C12.4290988,2.70436348 12.4922771,2.46857876 12.4330652,2.24759702 C12.3738533,2.02661528 12.201247,1.85400889 11.9802652,1.79479701 C11.7592835,1.73558513 11.5234988,1.79876346 11.3617289,1.96053333 L10.4497289,2.87253333 L10.4497289,2.87253333 Z M13.0203956,1.20639113 C13.3405419,1.52647328 13.5204044,1.96062968 13.5204044,2.41333333 C13.5204044,2.86603699 13.3405419,3.30019339 13.0203956,3.62026667 L3.6689289,12.9728 L0.346262232,13.8741333 L1.25506223,10.5589333 L10.6075956,1.20639113 C10.9276688,0.886253633 11.3618252,0.706391131 11.8145289,0.706391131 C12.2672326,0.706391131 12.701389,0.886253633 13.0214622,1.20639113 L13.0203956,1.20639113 Z M1,15 L11,15 L11,16 L1,16 L1,15 Z"></path>
                </svg>}
        >
            <span>使用预览模式</span>
        </Balloon.Tooltip>
    </span>`;

    const expandAll = `
        <Balloon.Tooltip
            align="b"
            style={{ maxWidth: 320 }}
            trigger={
                <span id="expand-all" role="img" aria-label="code" className="code-box-expand-trigger">
                    <svg id="all-not-expand" viewBox="0 0 16 16" focusable="false" className="" data-icon="code"
                        fill="currentColor" aria-hidden="true" style={{padding: '2px 0'}}>
                        <path d="M16,0 L16,16 L0,16 L0,0 L16,0 Z M15,1 L1,1 L1,15 L15,15 L15,1 Z M13,11 L13,12 L8,12 L8,11 L13,11 Z M3.33419059,3.86073652 L7.22040532,7.74695124 L3.33419127,11.6331801 L2.62708313,10.9260747 L5.806,7.747 L2.62708313,4.5678433 L3.33419059,3.86073652 Z"></path>
                    </svg>
                    <svg id="all-expanded" viewBox="0 0 16 16" focusable="false" className="" data-icon="code"
                        width="1em" height="1em" aria-hidden="true" style={{display: 'none', padding: '2px 0' }}>
                        <path d="M16,0 L16,16 L0,16 L0,0 L16,0 Z M15,1 L1,1 L1,15 L15,15 L15,1 Z M13,11 L13,12 L8,12 L8,11 L13,11 Z M3.33419059,3.86073652 L7.22040532,7.74695124 L3.33419127,11.6331801 L2.62708313,10.9260747 L5.806,7.747 L2.62708313,4.5678433 L3.33419059,3.86073652 Z"></path>
                    </svg>
                </span>}
        >
            <span>展开所有代码</span>
        </Balloon.Tooltip>`;

    const debugDemo = `
        <Balloon.Tooltip
            align="b"
            style={{ maxWidth: 320 }}
            trigger={
                <span id="debug-demo" role="img" aria-label="debug" className="code-box-expand-trigger">
                    <svg id="debug-hide" width="20px" height="20px" viewBox="0 0 20 20" fill='currentColor'>
                        <path d="M16.413,5.123 L17.497,5.125 L17.4938579,5.24712566 C17.4124011,6.50550853 16.4031377,7.52061238 15.1270346,7.59281941 L15.1270346,7.59281941 L14.7841667,7.60199902 L14.7841667,9.95 L17.834,9.95 L17.831,10.959 L14.7841667,10.9566667 L14.7841667,13.0316667 L14.7801982,13.2199617 L14.7627557,13.5369659 L14.8923079,13.5922729 L15.0760387,13.6769401 C16.2193459,14.2436639 16.9714896,15.3821922 17.0442066,16.6561778 L17.0442066,16.6561778 L17.049,16.817 L16.041,16.815 L16.0369034,16.6766262 C15.977166,15.8346669 15.5050511,15.0825334 14.7825181,14.6606226 L14.7825181,14.6606226 L14.5732891,14.538447 L14.4929745,14.7670366 L14.3977548,15.0175969 C13.9586581,16.0904742 13.1783448,16.9922153 12.1738893,17.5807743 C11.3678119,18.0526063 10.4502591,18.3006331 9.5161454,18.2991922 C8.58163819,18.3008405 7.66433888,18.0528072 6.8585976,17.5807666 C5.77722924,16.9468191 4.95575892,15.9497869 4.54036671,14.767059 L4.54036671,14.767059 L4.46020284,14.5388119 L4.25109728,14.6604582 L4.09864344,14.7565156 C3.45588133,15.1940269 3.04845604,15.9027194 2.99379785,16.67833 L2.99379785,16.67833 L2.988,16.817 L1.981,16.815 L1.98660477,16.6560529 C2.06302813,15.314598 2.89278604,14.1232567 4.13931435,13.5914585 L4.13931435,13.5914585 L4.26860859,13.5362986 L4.24966701,13.2084637 L4.24663589,13.0264918 L4.24666666,10.955 L1.197,10.955 L1.2,9.946 L4.24666666,9.94916666 L4.24666666,7.59660523 L4.04660524,7.59666667 L3.84744418,7.58883329 C3.25325975,7.54182361 2.6925671,7.28480262 2.2680489,6.86028442 L2.2680489,6.86028442 L2.13280475,6.71387571 C1.78900766,6.31075438 1.58128642,5.80905308 1.53950003,5.28088914 L1.53950003,5.28088914 L1.533,5.123 L2.618,5.125 L2.62315839,5.21874346 C2.68759515,5.89583723 3.22449438,6.44084418 3.90945934,6.5057741 L3.90945934,6.5057741 L4.03681945,6.51225743 L14.9841667,6.5125 L15.1220431,6.50595782 C15.8026115,6.44103331 16.3435021,5.90036306 16.4084549,5.21958988 L16.4084549,5.21958988 L16.413,5.123 Z M13.7,7.59664574 L5.33083334,7.59752091 L5.33083334,13.0325 L5.33809023,13.2809236 C5.37672347,13.9404662 5.56904731,14.574915 5.90158405,15.1427371 C6.4707333,16.1166781 7.40862559,16.8201762 8.50312303,17.0940194 L8.50312303,17.0940194 L8.97333334,17.1966415 L8.973,9.244 L10.061,9.247 L10.0583333,17.1899644 L10.2957078,17.1448102 L10.5315479,17.0928761 C11.6216842,16.8196938 12.5603581,16.1186245 13.1309897,15.1426111 C13.4628207,14.5757511 13.6554534,13.9381428 13.6930063,13.2822658 L13.6930063,13.2822658 L13.7,13.0380922 L13.7,7.59664574 Z M9.67166666,1.2 L9.94946991,1.20765814 C10.5902009,1.24335099 11.1774701,1.40349507 11.6876465,1.68145803 C12.2650485,1.99511049 12.7390562,2.46911818 13.0525889,3.04630002 L13.0525889,3.04630002 L13.1645227,3.26967079 C13.3738758,3.72555777 13.495913,4.2354958 13.5265083,4.78469633 L13.5265083,4.78469633 L13.533,5.021 L12.527,5.019 L12.5208902,4.8181819 C12.4911588,4.33711391 12.3726061,3.90241819 12.1697037,3.53081905 C11.9481223,3.12205789 11.6121088,2.78604432 11.2028132,2.56417225 C10.828898,2.35743243 10.3832897,2.23842323 9.88647544,2.21195 L9.88647544,2.21195 L9.67656315,2.20672661 L9.35916666,2.20666666 L9.11516207,2.2140909 C8.63471889,2.24374606 8.20055659,2.3619904 7.82860231,2.56430863 C7.41544155,2.79041125 7.08700404,3.11884877 6.86198002,3.5307879 L6.86198002,3.5307879 L6.76748586,3.72015117 C6.62182946,4.04481669 6.53549448,4.41405034 6.51076216,4.81686753 L6.51076216,4.81686753 L6.504,5.021 L5.497,5.019 L5.5043248,4.78469675 C5.54001765,4.1439658 5.70016173,3.55669654 5.97812469,3.04652017 C6.29196922,2.46904388 6.76626177,1.99502471 7.34373435,1.68161345 C7.86205179,1.39947142 8.45947065,1.23827271 9.11167854,1.20558259 L9.11167854,1.20558259 L9.36451498,1.19994903 L9.67166666,1.2 Z"></path>
                    </svg>
                    <svg id="debug-show" width="20px" height="20px" viewBox="0 0 20 20" style={{display: 'none'}}>
                        <path d="M16.413,5.123 L17.497,5.125 L17.4938579,5.24712566 C17.4124011,6.50550853 16.4031377,7.52061238 15.1270346,7.59281941 L15.1270346,7.59281941 L14.7841667,7.60199902 L14.7841667,9.95 L17.834,9.95 L17.831,10.959 L14.7841667,10.9566667 L14.7841667,13.0316667 L14.7801982,13.2199617 L14.7627557,13.5369659 L14.8923079,13.5922729 L15.0760387,13.6769401 C16.2193459,14.2436639 16.9714896,15.3821922 17.0442066,16.6561778 L17.0442066,16.6561778 L17.049,16.817 L16.041,16.815 L16.0369034,16.6766262 C15.977166,15.8346669 15.5050511,15.0825334 14.7825181,14.6606226 L14.7825181,14.6606226 L14.5732891,14.538447 L14.4929745,14.7670366 L14.3977548,15.0175969 C13.9586581,16.0904742 13.1783448,16.9922153 12.1738893,17.5807743 C11.3678119,18.0526063 10.4502591,18.3006331 9.5161454,18.2991922 C8.58163819,18.3008405 7.66433888,18.0528072 6.8585976,17.5807666 C5.77722924,16.9468191 4.95575892,15.9497869 4.54036671,14.767059 L4.54036671,14.767059 L4.46020284,14.5388119 L4.25109728,14.6604582 L4.09864344,14.7565156 C3.45588133,15.1940269 3.04845604,15.9027194 2.99379785,16.67833 L2.99379785,16.67833 L2.988,16.817 L1.981,16.815 L1.98660477,16.6560529 C2.06302813,15.314598 2.89278604,14.1232567 4.13931435,13.5914585 L4.13931435,13.5914585 L4.26860859,13.5362986 L4.24966701,13.2084637 L4.24663589,13.0264918 L4.24666666,10.955 L1.197,10.955 L1.2,9.946 L4.24666666,9.94916666 L4.24666666,7.59660523 L4.04660524,7.59666667 L3.84744418,7.58883329 C3.25325975,7.54182361 2.6925671,7.28480262 2.2680489,6.86028442 L2.2680489,6.86028442 L2.13280475,6.71387571 C1.78900766,6.31075438 1.58128642,5.80905308 1.53950003,5.28088914 L1.53950003,5.28088914 L1.533,5.123 L2.618,5.125 L2.62315839,5.21874346 C2.68759515,5.89583723 3.22449438,6.44084418 3.90945934,6.5057741 L3.90945934,6.5057741 L4.03681945,6.51225743 L14.9841667,6.5125 L15.1220431,6.50595782 C15.8026115,6.44103331 16.3435021,5.90036306 16.4084549,5.21958988 L16.4084549,5.21958988 L16.413,5.123 Z M13.7,7.59664574 L5.33083334,7.59752091 L5.33083334,13.0325 L5.33809023,13.2809236 C5.37672347,13.9404662 5.56904731,14.574915 5.90158405,15.1427371 C6.4707333,16.1166781 7.40862559,16.8201762 8.50312303,17.0940194 L8.50312303,17.0940194 L8.97333334,17.1966415 L8.973,9.244 L10.061,9.247 L10.0583333,17.1899644 L10.2957078,17.1448102 L10.5315479,17.0928761 C11.6216842,16.8196938 12.5603581,16.1186245 13.1309897,15.1426111 C13.4628207,14.5757511 13.6554534,13.9381428 13.6930063,13.2822658 L13.6930063,13.2822658 L13.7,13.0380922 L13.7,7.59664574 Z M9.67166666,1.2 L9.94946991,1.20765814 C10.5902009,1.24335099 11.1774701,1.40349507 11.6876465,1.68145803 C12.2650485,1.99511049 12.7390562,2.46911818 13.0525889,3.04630002 L13.0525889,3.04630002 L13.1645227,3.26967079 C13.3738758,3.72555777 13.495913,4.2354958 13.5265083,4.78469633 L13.5265083,4.78469633 L13.533,5.021 L12.527,5.019 L12.5208902,4.8181819 C12.4911588,4.33711391 12.3726061,3.90241819 12.1697037,3.53081905 C11.9481223,3.12205789 11.6121088,2.78604432 11.2028132,2.56417225 C10.828898,2.35743243 10.3832897,2.23842323 9.88647544,2.21195 L9.88647544,2.21195 L9.67656315,2.20672661 L9.35916666,2.20666666 L9.11516207,2.2140909 C8.63471889,2.24374606 8.20055659,2.3619904 7.82860231,2.56430863 C7.41544155,2.79041125 7.08700404,3.11884877 6.86198002,3.5307879 L6.86198002,3.5307879 L6.76748586,3.72015117 C6.62182946,4.04481669 6.53549448,4.41405034 6.51076216,4.81686753 L6.51076216,4.81686753 L6.504,5.021 L5.497,5.019 L5.5043248,4.78469675 C5.54001765,4.1439658 5.70016173,3.55669654 5.97812469,3.04652017 C6.29196922,2.46904388 6.76626177,1.99502471 7.34373435,1.68161345 C7.86205179,1.39947142 8.45947065,1.23827271 9.11167854,1.20558259 L9.11167854,1.20558259 L9.36451498,1.19994903 L9.67166666,1.2 Z"></path>
                    </svg>
                </span>}
        >
            <span>显示调试demo</span>
        </Balloon.Tooltip>`;

    return `ReactDOM.render(<React.Fragment>${liveDemo}${expandAll}${debugDemo}</React.Fragment>, document.getElementById('global-control'));`;
}

function getDemoOp(name) {
    const O2 = `
            <Balloon.Tooltip
                    align="b"
                    style={{ maxWidth: 320 }}
                    trigger={
                        <form className="code-box-code-action" action="//o2.alibaba-inc.com/sandbox/define" method="POST" target="_blank">
                            <input type="hidden" name="data" value="{}"/>
                            <button type="submit" className="preview-btn">
                            <span role="img" className="op-icon">
                                <svg viewBox="0 0 18 18" version="1.1">
                                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-opacity="0.45">
                                    <g id="编组-16" transform="translate(1.000000, 1.031385)" fill-rule="nonzero" stroke="#000000" stroke-width="1">
                                        <path d="M7.99320628,15.9864125 C3.58572657,15.9864125 2.27373675e-13,12.400686 2.27373675e-13,7.99320627 C2.27373675e-13,3.58572655 3.58572657,-1.70530257e-13 7.99320628,-1.70530257e-13 C12.400686,-1.70530257e-13 15.9864126,3.58572655 15.9864126,7.99320627 C15.9864126,8.42039157 15.6400618,8.76674238 15.2128765,8.76674238 C14.7856912,8.76674238 14.4393404,8.42039157 14.4393404,7.99320627 C14.4393404,4.43880793 11.5476691,1.54707218 7.99320628,1.54707218 C4.43874348,1.54707218 1.54707218,4.43880793 1.54707218,7.99320627 C1.54707218,11.5476691 4.43874348,14.4393404 7.99320628,14.4393404 C8.43115662,14.4393404 8.86852684,14.3952488 9.29313367,14.3084194 C9.7112944,14.2223635 10.1204305,14.492521 10.2060352,14.9110685 C10.2917043,15.3296804 10.0218692,15.7383653 9.60338611,15.82397 C9.07686588,15.9317494 8.53513277,15.9864125 7.99320628,15.9864125" id="path-2"/>
                                        <path d="M14.8745616,14.4162764 C15.3159789,14.440487 15.5487088,14.6453304 15.5721741,15.0302087 C15.5487088,15.4398955 15.3394443,15.6441411 14.9442844,15.6441411 L11.9445701,15.6441411 C11.5025757,15.6441411 11.2817709,15.4398955 11.2817709,15.0302087 C11.2584018,14.9100526 11.3166804,14.7536303 11.4562221,14.5606432 C11.6420213,14.3439436 11.8279166,14.127244 12.0142928,13.9105444 C12.7817242,13.0680563 13.339795,12.369935 13.6886012,11.8156822 C13.8978657,11.5267494 14.002498,11.2378167 14.002498,10.9488839 C13.9556635,10.5154847 13.746399,10.2751724 13.3746083,10.226552 C13.0024329,10.226552 12.7347936,10.5036285 12.5724598,11.0572835 C12.432918,11.5148932 12.2350015,11.7315928 11.9793834,11.7073822 C11.537389,11.7073822 11.3167766,11.4906827 11.3167766,11.0572835 C11.4176783,9.98807895 11.9602374,9.32514076 12.9424518,9.05442834 C13.5415272,8.88931453 14.2250594,9.11615024 14.4346419,9.22243967 C15.0292798,9.52400928 15.3502647,10.075465 15.3976267,10.8766507 C15.3976267,11.5510596 14.8744655,12.5019474 13.8280468,13.7300113 C13.5489633,14.0674648 13.3625871,14.2960206 13.2698799,14.4162764 L14.8745616,14.4162764 Z" id="path-7"/>
                                    </g>
                                </g>
                            </svg>
                            </span>
                            </button>
                        </form>}
                >
                <span>在Riddle中打开</span>
            </Balloon.Tooltip>`;
    const riddle = `
            <Balloon.Tooltip
                    align="b"
                    style={{ maxWidth: 320 }}
                    trigger={
                        <form className="code-box-code-action" action="//riddle.alibaba-inc.com/riddles/define" method="POST" target="_blank">
                            <input type="hidden" name="data" value="{}"/>
                            <button type="submit" className="preview-btn">
                            <span role="img" className="op-icon">
                                <svg viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M12.0135981,2 C14.9585189,2 17.345849,4.38716704 17.345849,7.33333333 C17.345849,9.38478693 16.1882418,11.1657179 14.4903288,12.0578577 L17.2084049,16.7658872 C17.2378708,16.8169235 17.2591949,16.8704263 17.2727803,16.9248914 C17.3474476,17.0262914 17.3916465,17.1520943 17.3916465,17.2882205 C17.3916465,17.628088 17.1161295,17.9036051 16.7762619,17.9036051 L2.81174505,17.9048498 C2.75007855,17.9255976 2.68404472,17.9368421 2.61538462,17.9368421 C2.27551708,17.9368421 2,17.661325 2,17.3214575 L2,4.90050552 C2,4.44767651 2.36696407,4.08058607 2.8201909,4.08058607 L2.8201909,4.08058607 L4.598,4.08 L4.59829061,3.64037695 C4.59829061,2.78210363 5.25867561,2.07778272 6.09736436,2.00602116 L6.23871411,2 Z M11.9839597,3.23076923 L6.23745245,3.23076923 C6.01143198,3.23076923 5.82905984,3.41419855 5.82905984,3.64047008 L5.82905984,3.64047008 L5.829,4.08 L11.5615101,4.08058607 C13.3089935,4.08058607 14.7370181,5.4476011 14.8334247,7.17082808 L14.8386124,7.35677655 C14.8386124,9.16616658 13.3721154,10.632967 11.5615101,10.632967 L11.5615101,10.632967 L10.299,10.632 L12.6155561,14.6429723 C12.7020335,14.7927556 12.7183875,14.9637818 12.6748043,15.1180362 C12.6779184,15.1342067 12.6786336,15.1513556 12.6786336,15.1686715 C12.6786336,15.508539 12.4031165,15.7840561 12.063249,15.7840561 L5.39477011,15.7840561 C5.33908357,15.7840561 5.28512459,15.7766596 5.23382202,15.7627953 L5.21367522,15.7639098 L5.21367522,15.7639098 C4.87380768,15.7639098 4.59829061,15.4883927 4.59829061,15.1485252 L4.598,5.323 L3.23076923,5.32307709 L3.23,16.672 L15.733,16.672 L13.0769083,12.0713449 C12.9069827,11.7770252 13.0078241,11.40068 13.3021438,11.2307544 C13.3538063,11.200927 13.4079962,11.1794424 13.4631533,11.1658825 C14.9972153,10.5673738 16.0854701,9.07745387 16.0854701,7.33333333 C16.0854701,5.06705157 14.2491614,3.23076923 11.9839597,3.23076923 L11.9839597,3.23076923 Z M11.7212434,5.32867389 L11.5688942,5.32307709 L5.829,5.323 L5.82905984,11.0261966 C5.82905984,11.0464748 5.83052125,11.0664018 5.83334393,11.0858783 L5.84579569,11.1428571 L5.829,11.142 L5.829,14.553 L11.142,14.553 L8.71393544,10.3467056 C8.54400168,10.0523717 8.64484792,9.67600839 8.93918185,9.50607462 C9.01663814,9.46135521 9.09977514,9.43538787 9.18333591,9.42676402 L9.18350929,9.40512829 L11.5688942,9.40512829 C12.6982428,9.40512829 13.6102561,8.49132999 13.6102561,7.36410269 C13.6102561,6.23662753 12.6963072,5.32307709 11.5688942,5.32307709 Z"></path>
                                </svg>
                            </span>
                            </button>
                        </form>}
                >
                <span>在Riddle中打开</span>
            </Balloon.Tooltip>`;

    const codepen = `
            <Balloon.Tooltip
                    align="b"
                    style={{ maxWidth: 320 }}
                    trigger={
                        <form className="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank">
                            <input type="hidden" name="data" value=""/>
                            <button type="submit" className="preview-btn">
                            <span role="img" className="op-icon">
                                <svg viewBox="0 0 20 20" fill="currentColor">
                                <path d="M17.7207447,7.0537234 L10.2739362,2.0893617 C10.0952128,1.97021277 9.86223404,1.97021277 9.68404255,2.0893617 L2.23723404,7.0537234 C2.0893617,7.15212766 2.00053191,7.31861702 2.00053191,7.4962766 L2.00053191,12.4606383 C2.00053191,12.6382979 2.0893617,12.8047872 2.23723404,12.9031915 L9.68404255,17.8675532 C9.77340426,17.9271277 9.87606383,17.9569149 9.97925532,17.9569149 C10.0824468,17.9569149 10.1851064,17.9271277 10.2744681,17.8675532 L17.7212766,12.9031915 C17.8691489,12.8047872 17.9579787,12.6382979 17.9579787,12.4606383 L17.9579787,7.4962766 C17.9579787,7.31861702 17.8691489,7.15212766 17.7212766,7.0537234 L17.7207447,7.0537234 Z M9.9787234,11.8218085 L7.2143617,9.9787234 L9.9787234,8.1356383 L12.7430851,9.9787234 L9.9787234,11.8218085 Z M10.5106383,7.21170213 L10.5106383,3.52553191 L16.4664894,7.4962766 L13.7021277,9.3393617 L10.5106383,7.21170213 Z M9.44680851,7.21170213 L6.25531915,9.3393617 L3.49095745,7.4962766 L9.44680851,3.52553191 L9.44680851,7.21170213 Z M5.2962766,9.9787234 L3.06382979,11.4670213 L3.06382979,8.49042553 L5.2962766,9.9787234 Z M6.25531915,10.6180851 L9.44680851,12.7457447 L9.44680851,16.4319149 L3.49095745,12.4611702 L6.25531915,10.6180851 Z M10.5106383,12.7457447 L13.7021277,10.6180851 L16.4664894,12.4611702 L10.5106383,16.4319149 L10.5106383,12.7457447 Z M14.6611702,9.9787234 L16.893617,8.49042553 L16.893617,11.4670213 L14.6611702,9.9787234 Z"></path>
                                </svg>
                            </span>
                            </button>
                        </form>}
                >
                <span>在CodePen中打开</span>
            </Balloon.Tooltip>`;

    const copy = `
            <Balloon.Tooltip
                    align="b"
                    style={{ maxWidth: 320 }}
                    trigger={
                        <span className="code-box-code-action">
                            <svg viewBox="0 0 20 20" focusable="false" data-icon="snippets" width="20px" height="20px" fill="currentColor" aria-hidden="true">
                            <path d="M15,5 L15,18 L2,18 L2,5 L15,5 Z M14,6 L3,6 L3,17 L14,17 L14,6 Z M18,2 L18,15 L16,15 L16,13.999 L17,14 L17,3 L6,3 L6,4 L5,4 L5,2 L18,2 Z M9,8 L9,11 L12,11 L12,12 L9,12 L9,15 L8,15 L8,12 L5,12 L5,11 L8,11 L8,8 L9,8 Z"></path>
                            </svg>
                        </span>}
                >
                <span>复制代码</span>
            </Balloon.Tooltip> `;

    const expand = `
            <span>
                <Balloon.Tooltip
                    align="b"
                    style={{ maxWidth: 400 }}
                    trigger={
                        <span id="${name}-icon-show"  className="code-box-code-action code-expand-icon-show">
                            <svg alt="expand code" width="20px" height="20px" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M14.4307124,13.5667899 L15.1349452,14.276759 L10.7473676,18.6288871 L6.42783259,14.2738791 L7.13782502,13.5696698 L10.7530744,17.2147744 L14.4307124,13.5667899 Z M4.79130753,8.067524 L16.3824174,11.1733525 L16.1235984,12.1392784 L4.53248848,9.03344983 L4.79130753,8.067524 Z M10.8154102,1.57503552 L15.1349452,5.93004351 L14.4249528,6.63425282 L10.809949,2.98914817 L7.13206544,6.6371327 L6.42783259,5.92716363 L10.8154102,1.57503552 Z" transform="translate(10.457453, 10.101961) rotate(90.000000) translate(-10.457453, -10.101961) "></path>
                            </svg>
                        </span>
                    }>
                    <span>展开代码<br/><br/>小提示: <br/><br/> 1. 点击一下代码，试一试在线编辑预览吧！ <br/><br/>2. 页面右上方 有 <strong>全局代码展开</strong> 及 <strong>开启在线编辑</strong> 模式哟～</span>
                </Balloon.Tooltip>
                <Balloon.Tooltip
                    align="b"
                    style={{ maxWidth: 400 }}
                    trigger={
                        <span id="${name}-icon-hide" className="code-box-code-action code-expand-icon-hide" style={{display: 'none'}}>
                            <svg alt="expand code" width="20px" height="20px" viewBox="0 0 20 20" style={{fill: '#3B9AFF'}} >
                                <path d="M14.4307124,13.5667899 L15.1349452,14.276759 L10.7473676,18.6288871 L6.42783259,14.2738791 L7.13782502,13.5696698 L10.7530744,17.2147744 L14.4307124,13.5667899 Z M4.79130753,8.067524 L16.3824174,11.1733525 L16.1235984,12.1392784 L4.53248848,9.03344983 L4.79130753,8.067524 Z M10.8154102,1.57503552 L15.1349452,5.93004351 L14.4249528,6.63425282 L10.809949,2.98914817 L7.13206544,6.6371327 L6.42783259,5.92716363 L10.8154102,1.57503552 Z" transform="translate(10.457453, 10.101961) rotate(90.000000) translate(-10.457453, -10.101961) "></path>
                            </svg>
                        </span>
                    }>
                    <span>收起代码<br/><br/>小提示: <br/><br/> 1. 点击一下代码，试一试在线编辑预览吧！ <br/><br/>2. 页面右上方 有 <strong>全局代码展开</strong> 及 <strong>开启在线编辑</strong> 模式哟～</span>
                </Balloon.Tooltip>
            </span>`;

    return `ReactDOM.render(<React.Fragment>${O2}${riddle}${codepen}${copy}${expand}</React.Fragment>, document.getElementById('${name}-operations'));`;
}

function getLiveDemoOp(name, componentName) {
    const liveO2 = `
    <Balloon.Tooltip
        align="b"
        style={{ maxWidth: 400 }}
        trigger={
            <span role="img" className="op-icon" onClick={()=>onRiddleOrCodePenClick('O2')}>
                <svg viewBox="0 0 18 18" version="1.1">
                    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-opacity="0.45">
                        <g id="编组-16" transform="translate(1.000000, 1.031385)" fill-rule="nonzero" stroke="#000000" stroke-width="1">
                            <path d="M7.99320628,15.9864125 C3.58572657,15.9864125 2.27373675e-13,12.400686 2.27373675e-13,7.99320627 C2.27373675e-13,3.58572655 3.58572657,-1.70530257e-13 7.99320628,-1.70530257e-13 C12.400686,-1.70530257e-13 15.9864126,3.58572655 15.9864126,7.99320627 C15.9864126,8.42039157 15.6400618,8.76674238 15.2128765,8.76674238 C14.7856912,8.76674238 14.4393404,8.42039157 14.4393404,7.99320627 C14.4393404,4.43880793 11.5476691,1.54707218 7.99320628,1.54707218 C4.43874348,1.54707218 1.54707218,4.43880793 1.54707218,7.99320627 C1.54707218,11.5476691 4.43874348,14.4393404 7.99320628,14.4393404 C8.43115662,14.4393404 8.86852684,14.3952488 9.29313367,14.3084194 C9.7112944,14.2223635 10.1204305,14.492521 10.2060352,14.9110685 C10.2917043,15.3296804 10.0218692,15.7383653 9.60338611,15.82397 C9.07686588,15.9317494 8.53513277,15.9864125 7.99320628,15.9864125" id="path-2"/>
                            <path d="M14.8745616,14.4162764 C15.3159789,14.440487 15.5487088,14.6453304 15.5721741,15.0302087 C15.5487088,15.4398955 15.3394443,15.6441411 14.9442844,15.6441411 L11.9445701,15.6441411 C11.5025757,15.6441411 11.2817709,15.4398955 11.2817709,15.0302087 C11.2584018,14.9100526 11.3166804,14.7536303 11.4562221,14.5606432 C11.6420213,14.3439436 11.8279166,14.127244 12.0142928,13.9105444 C12.7817242,13.0680563 13.339795,12.369935 13.6886012,11.8156822 C13.8978657,11.5267494 14.002498,11.2378167 14.002498,10.9488839 C13.9556635,10.5154847 13.746399,10.2751724 13.3746083,10.226552 C13.0024329,10.226552 12.7347936,10.5036285 12.5724598,11.0572835 C12.432918,11.5148932 12.2350015,11.7315928 11.9793834,11.7073822 C11.537389,11.7073822 11.3167766,11.4906827 11.3167766,11.0572835 C11.4176783,9.98807895 11.9602374,9.32514076 12.9424518,9.05442834 C13.5415272,8.88931453 14.2250594,9.11615024 14.4346419,9.22243967 C15.0292798,9.52400928 15.3502647,10.075465 15.3976267,10.8766507 C15.3976267,11.5510596 14.8744655,12.5019474 13.8280468,13.7300113 C13.5489633,14.0674648 13.3625871,14.2960206 13.2698799,14.4162764 L14.8745616,14.4162764 Z" id="path-7"/>
                        </g>
                    </g>
                </svg>
            </span>
        }>
        <span>在O2中打开</span>
    </Balloon.Tooltip>
    `;
    const liveCodePen = `
    <Balloon.Tooltip
        align="b"
        style={{ maxWidth: 400 }}
        trigger={
            <span role="img" className="op-icon" onClick={()=>onRiddleOrCodePenClick('CodePen')}>
                <svg viewBox="0 0 20 20" fill="currentColor">
                  <path
                    d="M17.7207447,7.0537234 L10.2739362,2.0893617 C10.0952128,1.97021277 9.86223404,1.97021277 9.68404255,2.0893617 L2.23723404,7.0537234 C2.0893617,7.15212766 2.00053191,7.31861702 2.00053191,7.4962766 L2.00053191,12.4606383 C2.00053191,12.6382979 2.0893617,12.8047872 2.23723404,12.9031915 L9.68404255,17.8675532 C9.77340426,17.9271277 9.87606383,17.9569149 9.97925532,17.9569149 C10.0824468,17.9569149 10.1851064,17.9271277 10.2744681,17.8675532 L17.7212766,12.9031915 C17.8691489,12.8047872 17.9579787,12.6382979 17.9579787,12.4606383 L17.9579787,7.4962766 C17.9579787,7.31861702 17.8691489,7.15212766 17.7212766,7.0537234 L17.7207447,7.0537234 Z M9.9787234,11.8218085 L7.2143617,9.9787234 L9.9787234,8.1356383 L12.7430851,9.9787234 L9.9787234,11.8218085 Z M10.5106383,7.21170213 L10.5106383,3.52553191 L16.4664894,7.4962766 L13.7021277,9.3393617 L10.5106383,7.21170213 Z M9.44680851,7.21170213 L6.25531915,9.3393617 L3.49095745,7.4962766 L9.44680851,3.52553191 L9.44680851,7.21170213 Z M5.2962766,9.9787234 L3.06382979,11.4670213 L3.06382979,8.49042553 L5.2962766,9.9787234 Z M6.25531915,10.6180851 L9.44680851,12.7457447 L9.44680851,16.4319149 L3.49095745,12.4611702 L6.25531915,10.6180851 Z M10.5106383,12.7457447 L13.7021277,10.6180851 L16.4664894,12.4611702 L10.5106383,16.4319149 L10.5106383,12.7457447 Z M14.6611702,9.9787234 L16.893617,8.49042553 L16.893617,11.4670213 L14.6611702,9.9787234 Z">
                  </path>
                </svg>
            </span>
        }>
        <span>在CodePen中打开</span>
    </Balloon.Tooltip>

    `;

    const liveRiddle = `
    <Balloon.Tooltip
        align="b"
        style={{ maxWidth: 400 }}
        trigger={
            <span role="img" className="op-icon" onClick={()=>onRiddleOrCodePenClick('Riddle')}>
              <svg viewBox="0 0 20 20" fill="currentColor">
                <path
                  d="M12.0135981,2 C14.9585189,2 17.345849,4.38716704 17.345849,7.33333333 C17.345849,9.38478693 16.1882418,11.1657179 14.4903288,12.0578577 L17.2084049,16.7658872 C17.2378708,16.8169235 17.2591949,16.8704263 17.2727803,16.9248914 C17.3474476,17.0262914 17.3916465,17.1520943 17.3916465,17.2882205 C17.3916465,17.628088 17.1161295,17.9036051 16.7762619,17.9036051 L2.81174505,17.9048498 C2.75007855,17.9255976 2.68404472,17.9368421 2.61538462,17.9368421 C2.27551708,17.9368421 2,17.661325 2,17.3214575 L2,4.90050552 C2,4.44767651 2.36696407,4.08058607 2.8201909,4.08058607 L2.8201909,4.08058607 L4.598,4.08 L4.59829061,3.64037695 C4.59829061,2.78210363 5.25867561,2.07778272 6.09736436,2.00602116 L6.23871411,2 Z M11.9839597,3.23076923 L6.23745245,3.23076923 C6.01143198,3.23076923 5.82905984,3.41419855 5.82905984,3.64047008 L5.82905984,3.64047008 L5.829,4.08 L11.5615101,4.08058607 C13.3089935,4.08058607 14.7370181,5.4476011 14.8334247,7.17082808 L14.8386124,7.35677655 C14.8386124,9.16616658 13.3721154,10.632967 11.5615101,10.632967 L11.5615101,10.632967 L10.299,10.632 L12.6155561,14.6429723 C12.7020335,14.7927556 12.7183875,14.9637818 12.6748043,15.1180362 C12.6779184,15.1342067 12.6786336,15.1513556 12.6786336,15.1686715 C12.6786336,15.508539 12.4031165,15.7840561 12.063249,15.7840561 L5.39477011,15.7840561 C5.33908357,15.7840561 5.28512459,15.7766596 5.23382202,15.7627953 L5.21367522,15.7639098 L5.21367522,15.7639098 C4.87380768,15.7639098 4.59829061,15.4883927 4.59829061,15.1485252 L4.598,5.323 L3.23076923,5.32307709 L3.23,16.672 L15.733,16.672 L13.0769083,12.0713449 C12.9069827,11.7770252 13.0078241,11.40068 13.3021438,11.2307544 C13.3538063,11.200927 13.4079962,11.1794424 13.4631533,11.1658825 C14.9972153,10.5673738 16.0854701,9.07745387 16.0854701,7.33333333 C16.0854701,5.06705157 14.2491614,3.23076923 11.9839597,3.23076923 L11.9839597,3.23076923 Z M11.7212434,5.32867389 L11.5688942,5.32307709 L5.829,5.323 L5.82905984,11.0261966 C5.82905984,11.0464748 5.83052125,11.0664018 5.83334393,11.0858783 L5.84579569,11.1428571 L5.829,11.142 L5.829,14.553 L11.142,14.553 L8.71393544,10.3467056 C8.54400168,10.0523717 8.64484792,9.67600839 8.93918185,9.50607462 C9.01663814,9.46135521 9.09977514,9.43538787 9.18333591,9.42676402 L9.18350929,9.40512829 L11.5688942,9.40512829 C12.6982428,9.40512829 13.6102561,8.49132999 13.6102561,7.36410269 C13.6102561,6.23662753 12.6963072,5.32307709 11.5688942,5.32307709 Z">
                </path>
              </svg>
            </span>
        }>
        <span>在Riddle中打开</span>
    </Balloon.Tooltip>
    `;

    const liveFold = `
    <Balloon.Tooltip
        align="b"
        style={{ maxWidth: 400 }}
        trigger={
            <span id="${name}-icon-show" className="code-box-code-action code-expand-icon-show">
                <svg alt="expand code" width="20px" height="20px" viewBox="0 0 20 20" fill="currentColor">
                <path
                    d="M14.4307124,13.5667899 L15.1349452,14.276759 L10.7473676,18.6288871 L6.42783259,14.2738791 L7.13782502,13.5696698 L10.7530744,17.2147744 L14.4307124,13.5667899 Z M4.79130753,8.067524 L16.3824174,11.1733525 L16.1235984,12.1392784 L4.53248848,9.03344983 L4.79130753,8.067524 Z M10.8154102,1.57503552 L15.1349452,5.93004351 L14.4249528,6.63425282 L10.809949,2.98914817 L7.13206544,6.6371327 L6.42783259,5.92716363 L10.8154102,1.57503552 Z"
                    transform="translate(10.457453, 10.101961) rotate(90.000000) translate(-10.457453, -10.101961) ">
                </path>
                </svg>
            </span>
        }>
        <span>展开代码<br/><br/>小提示: <br/><br/> 1. 点击一下代码，试一试在线编辑预览吧！ <br/><br/>2. 页面右上方 有 <strong>全局代码展开</strong> 及 <strong>开启在线编辑</strong> 模式哟～</span>
    </Balloon.Tooltip>

    <Balloon.Tooltip
        align="b"
        style={{ maxWidth: 400 }}
        trigger={
            <span id="${name}-icon-hide" className="code-box-code-action code-expand-icon-hide" style={{display: 'none'}}>
                <svg alt="expand code" width="20px" height="20px" viewBox="0 0 20 20" style={{fill: '#3B9AFF'}}>
                <path
                    d="M14.4307124,13.5667899 L15.1349452,14.276759 L10.7473676,18.6288871 L6.42783259,14.2738791 L7.13782502,13.5696698 L10.7530744,17.2147744 L14.4307124,13.5667899 Z M4.79130753,8.067524 L16.3824174,11.1733525 L16.1235984,12.1392784 L4.53248848,9.03344983 L4.79130753,8.067524 Z M10.8154102,1.57503552 L15.1349452,5.93004351 L14.4249528,6.63425282 L10.809949,2.98914817 L7.13206544,6.6371327 L6.42783259,5.92716363 L10.8154102,1.57503552 Z"
                    transform="translate(10.457453, 10.101961) rotate(90.000000) translate(-10.457453, -10.101961) ">
                </path>
                </svg>
            </span>
        }>
        <span>收起代码<br/><br/>小提示: <br/><br/> 1. 点击一下代码，试一试在线编辑预览吧！ <br/><br/>2. 页面右上方 有 <strong>全局代码展开</strong> 及 <strong>开启在线编辑</strong> 模式哟～</span>
    </Balloon.Tooltip>
    `;

    const liveCopy = `
            <Balloon.Tooltip
                    align="b"
                    style={{ maxWidth: 320 }}
                    trigger={
                        <span className="code-box-code-action" onClick={()=>{Message.success('复制成功')}}>
                            <svg viewBox="0 0 20 20" focusable="false" data-icon="snippets" width="20px" height="20px" fill="currentColor" aria-hidden="true">
                            <path d="M15,5 L15,18 L2,18 L2,5 L15,5 Z M14,6 L3,6 L3,17 L14,17 L14,6 Z M18,2 L18,15 L16,15 L16,13.999 L17,14 L17,3 L6,3 L6,4 L5,4 L5,2 L18,2 Z M9,8 L9,11 L12,11 L12,12 L9,12 L9,15 L8,15 L8,12 L5,12 L5,11 L8,11 L8,8 L9,8 Z"></path>
                            </svg>
                        </span>}
                >
                <span>复制代码</span>
            </Balloon.Tooltip> `;

    return `
    function onRiddleOrCodePenClick(type){
        const time = new Date().getTime();
        window.top.postMessage({
            type: 'RiddleOrCodePenClick',
            from: 'demo',
            body: {name: '${name}', component: '${componentName}', type: type, time: time}
          }, '*');
    }
    ReactDOM.render(${liveO2}, document.getElementById('${name}-O2'));
    ReactDOM.render(${liveCodePen}, document.getElementById('${name}-CodePen'));
    ReactDOM.render(${liveRiddle}, document.getElementById('${name}-Riddle'));
    ReactDOM.render(${liveCopy}, document.getElementById('${name}-copy-btn'));
    ReactDOM.render(<React.Fragment>${liveFold}</React.Fragment>, document.getElementById('${name}-fold-code'));
    `;
}

function getLiveScript(code) {
    const vars = code
        .split('\n')
        /* eslint-disable array-callback-return */
        .map(line => {
            if (!/^(?!\/\/)/.test(line)) return;
            let variable = line.match(/(?<=import\s+\{\s*).*(?=\s*\}\s+from)/);
            if (variable) return `${variable[0]},`;
            variable = line.match(/(?<=import\s).*(?=\s+from)/);
            if (variable) return `${variable[0]},`;
        })
        /* eslint-enable */
        .join('')
        .replace(/,$/, '');
    const func = code
        .split('\n')
        .filter(line => !/import/.test(line))
        .join('\n');

    return [func, vars];
}

function getDemoRenderScript(js, name, body, noImportJs, rawCss, rawImportJs, componentName) {
    const liveArr = getLiveScript(js);
    const liveVars = liveArr[1];
    const liveScript = transform(liveArr[0], {
        plugins: [
            require('@babel/plugin-syntax-jsx'),
            [require('@babel/plugin-proposal-class-properties'), { loose: true }],
            [require('babel-plugin-generator-prettier'), { printWidth: 200 }],
        ],
    })
        .code.replace(/`/g, '\\`')
        .replace(/\$/g, '\\$')
        .replace(/\n$/, '');
    return `
window.${name}RenderScript = function ${name}RenderScript(liveDemo){
    var mountNode = document.getElementById('${name}-mount');
    if(liveDemo==="false"){
        document.getElementById('${name}-body').innerHTML = \`${body}\`.replace(/{backquote}/g, '\`').replace(/{dollar}/g, '$');
        ${noImportJs}
        return;
    }

    const ${name}LiveScript = \`${liveScript}\`;
    const emptyTheme = {
        plain: {},
        styles:[
            {
                types: [],
                styles: {}
            }
        ]
      };

    function renderAfter(){
        ${
            rawImportJs
                ? `ReactDOM.render(
            <Balloon.Tooltip
                align="t"
                style={{ maxWidth: 320}}
                trigger={
                    <div
                        dangerouslySetInnerHTML = {{
                            __html: \`${marked(rawImportJs)
                                .replace(/{backquote}/g, '`')
                                .replace(/{dollar}/g, '$')}\`
                            }}
                        >
                    </div>}
            >
                编辑模式暂不支持修改依赖引入
            </Balloon.Tooltip>, document.getElementById('${name}-live-import'));`
                : ''
        }
        ${
            rawCss
                ? `ReactDOM.render(
            <Balloon.Tooltip
                align="b"
                style={{ maxWidth: 320}}
                trigger={<div dangerouslySetInnerHTML = {{  __html: \`${marked(rawCss)}\`}}></div>}
            >
                编辑模式暂不支持修改css
            </Balloon.Tooltip>, document.getElementById('${name}-live-css'));`
                : ''
        }
    }

    class LiveRenderer extends React.Component{
        constructor(props){
            super(props);
        }
        componentDidMount(){
            renderAfter();
        }

        onBlur = () => {
            const time = new Date().getTime();
            window.top.postMessage({
                type: 'ReactLiveEdit',
                from: 'demo',
                body: {name: '${name}', component: '${componentName}', time: time}
              }, '*');
        }

        render(){
            return(
                <LiveProvider
                    code={${name}LiveScript}
                    scope={{${liveVars ? `${liveVars},` : ''}mountNode}}
                    noInline={true}>
                    <div id="${name}-live-editor">
                        <LiveError id="${name}-live-error" className="react-live-error"/>
                        <div id="${name}-live-import" ></div>
                        <div id="${name}-live-body" className="react-live-body"><LiveEditor theme={emptyTheme} onBlur={this.onBlur}/></div>
                        <div id="${name}-live-css"></div>
                    </div>
                    <LivePreview />
                </LiveProvider>
            )
        }
    }
    ReactDOM.render(<LiveRenderer/>,  document.getElementById('${name}-body'));
    return;
}

window.renderFuncs.push(${name}RenderScript);`;
}

module.exports.getGlobalControl = getGlobalControl;
module.exports.getDemoOp = getDemoOp;
module.exports.getDemoRenderScript = getDemoRenderScript;
module.exports.getLiveDemoOp = getLiveDemoOp;
